<template>
  <div>
    <div>
      <el-card
        title="用户管理"
        style="width: 100%"
        class="box-card sure-height"
      >
        <div slot="header" class="clearfix">
          <span>用户管理</span>
        </div>
        <div
          style="
            float: right;
            padding: 3px 0;
            display: flex;
            position: relative;
            top: -12px;
          "
        >
          <el-input v-model="keyWord"></el-input
          ><el-button type="primary" size="small" @click="findSome()"
            >搜索</el-button
          ><el-button type="success" size="small" @click="addVisible = true"
            >新增</el-button
          >
        </div>
        <el-table
          :data="
            userData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          border
          style="width: 100%"
          :row-style="{ height: '100px' }"
        >
          <el-table-column prop="user_id" label="编号"> </el-table-column>
          <el-table-column prop="username" label="账号"> </el-table-column>
          <el-table-column prop="role" label="权限"></el-table-column>
          <el-table-column prop="userTel" label="电话"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="getUserMessage(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                @click="deleteUser(scope.row.user_id)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userData.length"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="addVisible" width="30%">
      <el-form :model="addUserForm" label-width="40px">
        <el-form-item label="账号">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addUserForm.userTel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <el-dialog title="修改用户" :visible.sync="editVisible" width="30%">
      <el-form :model="editUserForm" label-width="40px">
        <el-form-item label="账号">
          <el-input v-model="editUserForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="editUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editUserForm.userTel"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="editUserForm.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.role"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GetAllUser, AddUser, DeleteUser, EditUser } from "../../api/user";
export default {
  data() {
    return {
      userData: [],
      keyWord: "",
      currentPage: 1,
      total: "",
      pageSize: 5,
      addVisible: false,
      addUserForm: {
        username: "",
        password: "",
        userTel: "",
        email: "",
      },
      editVisible: false,
      editUserForm: {
        user_id: "",
        username: "",
        password: "",
        userTel: "",
        state: "",
        role: "",
        email: "",
      },
      options: [
        {
          value: "1级权限",
          label: "1级权限",
        },
        {
          value: "2级权限",
          label: "2级权限",
        },
        {
          value: "3级权限",
          label: "3级权限",
        },
        {
          value: "4级权限",
          label: "4级权限",
        },
      ],
    };
  },
  created() {
    this.getAllUser(this.keyWord);
    let data = sessionStorage.getItem('state');
		if(data > 1){
			this.$router.push('/datapresentation')
		}
    if(data == null){
			this.$router.push('/login')
		}
  },
  methods: {
    //得到所有用户信息
    getAllUser(data) {
      GetAllUser({ username: data }).then((res) => {
        console.log(res);
        this.userData = res.data.users;
        this.total = this.userData.length;
      });
    },
    //添加用户
    addUser() {
      AddUser(this.addUserForm).then((res) => {
        console.log(res);
        this.addVisible = false;
        this.getAllUser(this.keyWord);
      });
    },
    //搜索用户
    findSome() {
      this.getAllUser(this.keyWord);
    },
    getUserMessage(row) {
      (this.editUserForm.username = row.username),
        (this.editUserForm.user_id = row.user_id),
        (this.editUserForm.userTel = row.userTel),
        (this.editUserForm.role = row.role),
        (this.editUserForm.email = row.email),
        (this.editVisible = true);
    },
    editUser() {
      if (this.editUserForm.role == "1级权限") {
        this.editUserForm.state = 1;
      }
      if (this.editUserForm.role == "2级权限") {
        this.editUserForm.state = 2;
      }
      if (this.editUserForm.role == "3级权限") {
        this.editUserForm.state = 3;
      }
      if (this.editUserForm.role == "4级权限") {
        this.editUserForm.state = 4;
      }
      EditUser(this.editUserForm).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.getAllUser(this.keyWord);
        } else {
          this.$message.error("修改失败");
        }
      });
      this.editVisible = false;
    },
    //删除用户
    deleteUser(id) {
      DeleteUser({ user_id: id }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.getAllUser(this.keyWord);
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.sure-height {
  height: 800px !important;
}
</style>